import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';

class ActivtePage extends GetView<ActivteController> {
  const ActivtePage({Key? key}) : super(key: key);

  // 构建活动卡片
  Widget _buildActivityCard(ActivityItem activity) {
    return GestureDetector(
      onTap: () => controller.onActivityTap(activity),
      child: Card(
        clipBehavior: Clip.antiAlias, // 确保内容不超出圆角
        margin: const EdgeInsets.all(4),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 活动图片
            Stack(
              children: [
                AspectRatio(
                  aspectRatio: 1.0, // 方形图片
                  child: Container(
                    color: Colors.blue[100],
                    child: Center(
                      child: Icon(
                        Icons.image,
                        size: 50,
                        color: Colors.blue[300],
                      ),
                    ),
                  ),
                ),
                // 举报按钮
                Positioned(
                  top: 5,
                  right: 5,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                    decoration: BoxDecoration(
                      color: Colors.red[400],
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: const Text(
                      "举报",
                      style: TextStyle(color: Colors.white, fontSize: 10),
                    ),
                  ),
                ),
              ],
            ),
            // 活动信息
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(6.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      activity.title,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 13,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 2),
                    Row(
                      children: [
                        const Icon(Icons.access_time, size: 12, color: Colors.grey),
                        const SizedBox(width: 2),
                        Expanded(
                          child: Text(
                            activity.date,
                            style: const TextStyle(color: Colors.grey, fontSize: 10),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 2),
                    Row(
                      children: [
                        const Icon(Icons.location_on, size: 12, color: Colors.grey),
                        const SizedBox(width: 2),
                        Expanded(
                          child: Text(
                            activity.location,
                            style: const TextStyle(color: Colors.grey, fontSize: 10),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                    const Spacer(), // 添加弹性空间
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '已有 ${activity.participants} 人报名',
                          style: const TextStyle(color: Colors.blue, fontSize: 10),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: const Text(
                            '我要参加',
                            style: TextStyle(color: Colors.white, fontSize: 10),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建加载中视图
  Widget _buildLoadingView() {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }

  // 构建瀑布流网格视图
  Widget _buildGridView() {
    return Padding(
      padding: const EdgeInsets.all(4),
      child: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 两列
          childAspectRatio: 0.65, // 调整卡片宽高比，使其更高一点
          crossAxisSpacing: 8, // 水平间距
          mainAxisSpacing: 8, // 垂直间距
        ),
        itemCount: controller.state.activities.length,
        itemBuilder: (context, index) {
          final activity = controller.state.activities[index];
          return _buildActivityCard(activity);
        },
      ),
    );
  }

  // 构建主视图
  Widget _buildView() {
    return Container(
      color: Colors.grey[100], // 设置背景色
      child: Obx(() => controller.state.isLoading.value
          ? _buildLoadingView()
          : _buildGridView()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ActivteController>(
      builder: (_) {
        return _buildView();
      },
    );
  }
}
